<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>zcy-fover</title>
		
		<!-- Preloader CSS -->
		<script src="assets/js/pace.min.js"></script>
		
		<!-- Meta Viewport -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		
		<!-- Meta description and keywords -->
		<meta name="description" content="">
		<meta name="keywords" content="">
		
		<!-- Shortcut icons And Apple touch icon -->
		<link rel="shortcut icon" href="assets/img/favicon2.png" >
		<link rel="apple-touch-icon" href="assets/img/favicon2.png" >
		
		<!-- Preloader CSS -->
		<link rel="stylesheet" href="assets/css/pace.css" >
		
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css">
		
		<!-- Universal stylesheet (Shouldbe used with all pages portfolio pages) -->
		<link rel="stylesheet" href="assets/css/portfolio.css">
		
		<!-- Custom CSS < Editable > -->
		<link rel="stylesheet" href="assets/css/pages/single-portfolio.css">
		
		<!-- Custom CSS (color theme) < Editable > -->
		<link rel="stylesheet" href="assets/css/color-theme/portfolio/blue.css">
		
		<!-- CSS Only for demo delete in original vrsion -->
		<link rel="stylesheet" href="assets/css/demo.css">
	</head>
	<!-- Body starts here -->
	<body data-spy="scroll" data-target=".navbar">
	<!-- Overlay visible only while loading of page -->
	    <div class="overlay"></div>
	    <div class="layout full-width">
            <!-- Section demo shouldnot include in original version only for the demo perpose-->
            <section id="demo" class="demo affix hidden-xs sp">
                <div class="container">
                    <div class="row">
                        <div class="handle">
                            <button type="button" class="btn btn-danger" data-toggle="style-switcher">
                                <span class="fa fa-cog fa-spin"></span>
                            </button>
                        </div>
                        <div class="styler well custom">
                            <span class="close fa fa-times"></span>
                            <h3 class="heading txt-xs">颜色主题</h3>
                            <div class="ul ul-xs"><span></span></div>
                            <div class="color-themes"></div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Portfolio showcase starts here -->
            <section id="port-showcase" class="port-showcase">
                <div class="wrapper">
                    <div class="container head">
                        <div class="row text-right">
                            <div class="head-content">
                                <!-- Portfolio Heading -->
                                <h3 class="heading inline txt-md">导航</h3>
                                <!-- Navbar toggle button (Visible only on large devices) -->
                                <button type="button" class="btn btn-lg border-btn btn-default nav-toggle"><span class="fa fa-bars"></span></button>
                            </div>
                        </div>
                    </div>
                    <!-- About me section start here -->
                    <div class="container about-me">
                        <div class="row">
                            <div class="col-md-6">
                                <!-- User image -->
                                <img src="assets/img/avatars/avatarMe.png" alt="user" class="img img-responsive img-circle img-profile">
                            </div>
                            <div class="col-md-6">
                                <!-- User name  -->
                                <h3 class="heading txt-md">我是<span class="color-inverse txt-border name">张崇羿</span></h3>
                                <!-- Short description of user -->
                                <p>
                                    哈喽，欢迎你的到来，我是一名Java学习者，利用闲余时间给自己做了一份Web版的简历。从下面这些内容你可以了解到我。
                                    我就读于武汉理工大学-软件工程专业。对于自己之后的职业发展，当然是想进入好一点的公司喽，然后从事Java相关工作，
                                    当然对于IT行业的发展，个人觉得他的变化太快了，Java也只是目前的学习方向，对于未来，我会跟随行业发展的脚步，调
                                    整自己的学习路线，适应时代的需求。引领时代也说不定呢（害羞脸）。
                                </p>

                                <!-- Buttons not visible on mobile device -->
                                <!-- Contact me button (Scroll to the contact section) -->
                                <a href="#" class="btn hidden-xs btn-warning btn-lg border-btn" data-scroll-target=".port-contact">联系我</a>
                                <a href="https://github.com/zcy-fover" class="btn hidden-xs btn-success btn-lg border-btn btn-icon btn-icon-right">
                                    My GiuHub<span class="fa fa-chevron-right"></span>
                                </a>
                                <a href="http://blog.csdn.net/zcy_fover" class="btn hidden-xs btn-success btn-lg border-btn btn-icon btn-icon-right">
                                    My CSDN Blog<span class="fa fa-chevron-right"></span>
                                </a>

                            </div>
                        </div>
                    </div>
                    <!-- Arrow to next section (visible only on large devices) -->
                    <div class="container navigator">
                        <div class="row text-center visible-lg visible-md">
                            <a href="#" data-scroll-target=".port-skills"><span class="fa fa-chevron-down fa-1x"></span></a>
                            <a href="#" data-scroll-target=".port-skills"><span class="fa fa-chevron-down fa-2x"></span></a>
                            <a href="#" data-scroll-target=".port-skills"><span class="fa fa-chevron-down fa-3x"></span></a>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Skills Section starts here -->
            <section id="port-skills" class="port-skills">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <!-- Section heading -->
                            <h1 class="heading">我的技能</h1>
                            <!-- Divider -->
                            <div class="ul ul-line"><span></span></div>
                                <div class="col-lg-3 col-md-6 col-sm-6 text-center">
                                    <!-- Skill circle -->
                                    <div class="col-xs-12 circle" id="java_circle"></div>
                                    <!-- Skill name -->
                                    <div class="col-xs-12 circle-desc text-center"><span class="inline txt-sm color">Java</span></div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-sm-6 text-center">
                                    <!-- Skill circle -->
                                    <div class="col-xs-12 circle" id="mysql_circle"></div>
                                    <!-- Skill name -->
                                    <div class="col-xs-12 circle-desc text-center"><span class="inline txt-sm color">MySQL</span></div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-sm-6 text-center">
                                    <!-- Skill circle -->
                                    <div class="col-xs-12 circle" id="spring_circle"></div>
                                    <!-- Skill name -->
                                    <div class="col-xs-12 circle-desc text-center"><span class="inline txt-sm color">Spring</span></div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-sm-6 text-center">
                                    <!-- Skill circle -->
                                    <div class="col-xs-12 circle" id="hibernate_circle"></div>
                                    <!-- Skill name -->
                                    <div class="col-xs-12 circle-desc text-center"><span class="inline txt-sm color">Hibernate</span></div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-sm-6 text-center">
                                    <!-- Skill circle -->
                                    <div class="col-xs-12 circle" id="html_circle"></div>
                                    <!-- Skill name -->
                                    <div class="col-xs-12 circle-desc text-center"><span class="inline txt-sm color">HTML</span></div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-sm-6 text-center">
                                    <!-- Skill circle -->
                                    <div class="col-xs-12 circle" id="css_circle"></div>
                                    <!-- Skill name -->
                                    <div class="col-xs-12 circle-desc text-center"><span class="inline txt-sm color">CSS</span></div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-sm-6 text-center">
                                    <!-- Skill circle -->
                                    <div class="col-xs-12 circle" id="js_circle"></div>
                                    <!-- Skill name -->
                                    <div class="col-xs-12 circle-desc text-center"><span class="inline txt-sm color">JavaScript&jQuery</span></div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-sm-6 text-center">
                                    <!-- Skill circle -->
                                    <div class="col-xs-12 circle" id="mybatis_circle"></div>
                                    <!-- Skill name -->
                                    <div class="col-xs-12 circle-desc text-center"><span class="inline txt-sm color">Mybatis</span></div>
                                </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Education section starts here -->
            <section id="port-education" class="port-education">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <!-- section heading -->
                            <h1 class="heading">我的教育</h1>
                            <div class="ul ul-line"><span></span></div>
                            <div class="col-sm-4">
                                <!-- Education Block -->
                                <div class="col-xs-12 float well my-edu">
                                    <!-- Degree Name -->
                                    <h4 class="heading txt-xs txt-n">大学</h4>
                                    <!-- College -->
                                    <h5><span class="fa fa-institution"></span><span class="college">武汉理工大学</span></h5>
                                    <!-- Year -->
                                    <h5><span class="fa fa-graduation-cap"></span><span class="college">2013-2017</span></h5>
                                    <!-- Persentile -->
                                    <h5><span class="fa fa-pie-chart"></span><span class="college">30% Out Of 100%</span></h5>
                                    <!-- profession -->
                                    <h5><span class="fa fa-barcode"></span><span class="college">软件工程</span></h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Portfolio Starts here -->
            <section id="port-folio" class="port-folio">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <!-- Section heading -->
                            <h1 class="heading txt-n">我的项目</h1>
                            <div class="ul ul-line"><span></span></div>
                            <!-- Portfolio Filters -->
                            <div class="col-sm-12 text-center">
                                <button type="button" class="btn btn-warning btn-md hidden-xs border-btn portfolio-item-filter" data-filter=".cat-web">Web Design</button>
                                <button type="button" class="btn btn-danger btn-md hidden-xs border-btn portfolio-item-filter" data-filter=".cat-logo">Graphics</button>
                                <button type="button" class="btn btn-info btn-md hidden-xs border-btn portfolio-item-filter" data-filter=".cat-dev">Development</button>
                            </div>
                            <div class="port-item-wrapper" id="port-item-wrapper">
                                <!-- Portfolio Item -->
                                <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item text-center cat-web">
                                    <figure>
                                        <!-- Portfolio Image -->
                                        <img src="assets/img/portfolio/portfolio10.png" class="img img-responsive" alt="EasyBuy Image" />
                                        <figcaption>
                                            <!-- Portfolio Description Heading (Portfolio Item Name) -->
                                            <h3 class="heading text-center txt-sm txt-n animated fadeInDownBig a-d-0-4">easyBuy</h3>
                                            <div class="ul ul-center"><span></span></div>
                                            <p style="color: #2aabd2; text-align: center">模拟线下的购物操作，功能未完全实现</p>
                                            <!-- Description Action Buttons (i.e. Share like View etc) -->
                                            <div class="buttons">
                                                <a href="http://101.201.66.139:8080/easyBuy/" target="_blank" class="animated fadeInLeftBig a-d-0-3 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span>去瞧瞧</span></a>
                                            </div>
                                        </figcaption>
                                    </figure>
                                </div>
                                <!-- Portfolio Item -->
                                <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item text-center cat-web">
                                    <figure>
                                        <!-- Portfolio Image -->
                                        <img src="assets/img/portfolio/portfolio11.png" class="img img-responsive" alt="LabMSystem Image" />
                                        <figcaption>
                                            <!-- Portfolio Description Heading (Portfolio Item Name)-->
                                            <h3 class="heading text-center txt-sm txt-n animated fadeInDownBig a-d-0-4">LabMSystem</h3>
                                            <div class="ul ul-center"><span style="width: 150px"></span></div>
                                            <p style="color: #2aabd2; text-align: center">对实验室资源进行管理，合理分配，避免使用冲突。方便学生、老师和实验室管理员使用</p>
                                            <!-- Description Action Buttons (i.e. Share like View etc) -->
                                            <div class="buttons">
                                                <a href="http://101.201.66.139:8080/LabMSystem/" target="_blank" class="animated fadeInLeftBig a-d-0-3 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span>去瞧瞧</span></a>
                                            </div>
                                        </figcaption>
                                    </figure>
                                </div>
                                <!-- Portfolio Item -->
                                <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item text-center cat-web">
                                    <figure>
                                        <!-- Portfolio Image -->
                                        <img src="assets/img/portfolio/portfolio12.png" class="img img-responsive" alt="BookStore Image" />
                                        <figcaption>
                                            <!-- Portfolio Description Heading (Portfolio Item Name)-->
                                            <h3 class="heading text-center txt-sm txt-n animated fadeInDownBig a-d-0-4">bookStore</h3>
                                            <div class="ul ul-center"><span style="width: 120px"></span></div>
                                            <p style="color: #2aabd2; text-align: center">网购书店，重点练习分页和业务回滚</p>
                                            <!-- Description Action Buttons (i.e. Share like View etc) -->
                                            <div class="buttons">
                                                <a href="http://101.201.66.139:8080/bookStore/" target="_blank" class="animated fadeInLeftBig a-d-0-3 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span>去瞧瞧</span></a>
                                            </div>
                                        </figcaption>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Contact Section starts here -->
            <section id="port-contact" class="port-contact">
                <div class="wrapper">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12">
                                <!-- section heading -->
                                <h3 class="heading txt-md txt-n text-center">联系我</h3>
                                <div class="ul ul-center"><span></span></div>
                                <form action="?" method="post">
                                    <div class="col-sm-6">
                                        <!-- Name Label -->
                                        <label class="float-label" for="port-contact-name">姓名</label>
                                        <!-- Name field -->
                                        <input id="port-contact-name" type="text" required placeholder="Name" class="form-control">
                                        <!-- Email Label -->
                                        <label class="float-label" for="port-contact-email">邮件</label>
                                        <!-- Email Field -->
                                        <input id="port-contact-email" type="email" required placeholder="E Mail" class="form-control">
                                        <!-- Phone Label -->
                                        <label class="float-label" for="port-contact-phone">手机号</label>
                                        <!-- Phone Field -->
                                        <input id="port-contact-phone" type="text" required placeholder="Phone" class="form-control">
                                    </div>
                                    <div class="col-sm-6">
                                        <!-- Message Label -->
                                        <label class="float-label" for="port-contact-msg">留言</label>
                                        <!-- Message Textarea -->
                                        <textarea id="port-contact-msg" required placeholder="Message" class="form-control"></textarea>
                                    </div>
                                    <div class="col-sm-12 text-center">
                                        <!-- Submit Animated Button -->
                                        <button type="button" class="btn btn-warning border-btn btn-icon btn-icon-right btn-lg">我接好了<span class="fa fa-chevron-right"></span></button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Footer Section starts here -->
            <section id="port-foot" class="port-foot">
                <div class="container">
                    <div class="row">
                        <!-- Social Icons -->
                        <div class="col-sm-12 text-center social-media">
                        </div>
                        <div class="col-md-12">
                            <!-- Footer Copyright link -->
                            <div class="ul ul-center ul-line ul-line-sm"><a href="#" data-scroll-target=".port-showcase"><span data-bgcolor="rgba(25, 23, 23, 0.99)" class="fa fa-chevron-up"></span></a></div>
                            <h6 class="designer">Powered By <a href="#" target="_blank">zcy-fover</a></h6>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Navbar -->
            <nav class="navbar navbar-default navbar-fixed-top">
                <div class="container">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <!-- Collapse button visible only on small devices -->
                        <button type="button" class="btn btn-lg border-btn btn-default navbar-toggle collapsed" data-toggle="collapse" data-target="#relient-portfolio-nav"><span class="fa fa-bars"></span></button>
                        <!-- Portfolio Name -->
                        <a class="heading inline txt-sm navbar-brand" href="#">导航</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="relient-portfolio-nav">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="active"><a href="#port-showcase" data-scroll-target="#port-showcase">关于我</a></li>
                            <li><a href="#port-skills" data-scroll-target="#port-skills">我的技能</a></li>
                            <li><a href="#port-education" data-scroll-target="#port-education">我的教育</a></li>
                            <li><a href="#port-folio" data-scroll-target="#port-folio">我的项目</a></li>
                            <li><a href="#port-contact" data-scroll-target="#port-contact">联系我</a></li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
        </div>
	    <!-- jQuery -->
		<script src="assets/js/jquery-2.1.1.min.js"></script>
		
		<!-- Bootstrap -->
		<script src="assets/js/bootstrap.min.js"></script>
		
		<!-- Universal js < Editable > -->
		<script src="assets/js/portfolio.js"></script>
		
		<!-- Custom Page Specific js < Editable > -->
		<script src="assets/js/pages/single-portfolio.js"></script>
		
		<!-- Style switcher for demo page only -->
		<script src="assets/js/style-switcher.js"></script>
	</body>
</html>